import type { FC } from 'react';
import '@/views/map/css/Gaode.css'
import{ useEffect, useState } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
interface GaodeProps { }

const Gaode: FC<GaodeProps> = () => {
    const [map, setMap] = useState({})
    console.log(map);
    useEffect(() => {
        AMapLoader.load({
            key: '5f0e2591b304a1b16e430f8283cc622a', // 申请好的Web端开发者Key，首次调用 load 时必填
            version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then(AMap => {
            setMap(new AMap.Map('container', {
                // 设置地图容器id
                resizeEnable: true,
                rotateEnable: true,
                pitchEnable: true,
                zoom: 17,
                pitch: 80,
                rotation: -15,
                viewMode: '3D',//开启3D视图,默认为关闭
                buildingAnimation: true,//楼块出现是否带动画
                expandZoomRange: true,
                zooms: [3, 20],
                center: [116.333926, 39.997245]
            }))
        })
            .catch(e => {
                console.log(e);
            });

    }, [])
    return (
        <>
            <h1>高德地图</h1>
            <div id="container" className="map" style={{ height: '620px' }}></div>
        </>
    );
}

export default Gaode;
